<template>
  <div id="wrapper">
    <div id="pano" style="width: 100%; height: 100%">
      <noscript>
        <table style="width: 100%; height: 100%">
          <tr style="vertical-align: middle">
            <td>
              <div style="text-align: center">
                ERROR:
                <br />
                <br />Javascript not activated
                <br />
                <br />
              </div>
            </td>
          </tr>
        </table>
      </noscript>
    </div>
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(["openVrClick", "openDetail", "getpage"]);
let krpano = ref();
let pano = ref();
onMounted(() => {
  embedpano({
    swf: "krpano/tour.swf",
    xml: import.meta.env.VITE_APP_BASE_VR + "/shifantian/tour.xml",
    target: "pano",
    html5: "auto",
    mobilescale: 1.0,
    passQueryParameters: true,
    onready: krpano_onready_callback,
  });
  window.krpano = krpano.value;
  window.show = show;
  window.openDetail = openDetail;
  window.getpage = getpage;
});
const krpano_onready_callback = (krpano_interface: any) => {
  krpano.value = krpano_interface;
};
function go() {
  krpano.value.call("loadscene(" + pano.value.scene + ",null,MERGE,BLEND(1));");
}
function show(n: number) {
  emit("openVrClick", n);
}
function openDetail(num: string, name: string, type: number) {
  emit("openDetail", name, num, type);
}
function getpage(num: number) {
  emit("getpage", num);
}
</script>
<style scoped>
#wrapper {
  width: 100%;
  height: 100%;
}
</style>
